<script setup lang="ts">
import { reactive } from 'vue';
import { UserOutlined,LockOutlined, } from '@ant-design/icons-vue'
import {App} from 'ant-design-vue';

interface FormState {
	name: string;
	password: string;
	remember: boolean;
}
/* data */
const { message } = App.useApp()
const myTitle = '欢迎使用'+import.meta.env.VITE_APP_NAME+'！'
const loading = ref(false)	//登录按钮是否在loading状态
const success = ref(false)	//是否已登录成功
const router = useRouter()
const formState = reactive<FormState>({
	name: '',
	password: '',
	remember: true,
});

/* computed */
const textLogin = computed(()=>{
	if(loading.value){
		return '登录…'
	}else{
		return '点我登录'
	}
})

const onFinish = (values: any) => {
	//console.log('Success:', values);
	loading.value = true;
	apiUser.login(values).then((res:any) => {
		loading.value = false;
		localStorage.setItem(import.meta.env.VITE_TOKEN_KEY,res.data.token);
		success.value=true
		message.success("登录成功！",1)
		router.replace('/')
	})
};

const onFinishFailed = (errorInfo: any) => {
	console.log('Failed:', errorInfo);
};

//todo: 待加入逻辑：如果进入该路由页，则先判断token在服务端是否有效，还有效则直接replace至/chat/
</script>

<template>
	<div class="login-wrap">
		<div class="login-bg">
			<img src="/img/bg-signin.svg" alt=""/>
		</div>
		<a-card :title="myTitle" :bordered="false">
			<a-form :model="formState" name="basic"  autocomplete="off"
					@finish="onFinish" @finishFailed="onFinishFailed" >

				<a-form-item name="name" :rules="[{ required: true, message: '用户名不能为空!' }]" >
					<a-input v-model:value="formState.name" size="large" placeholder="请输入您的用户名/手机">
						<template #prefix><UserOutlined class="site-form-item-icon" /></template>
					</a-input>
				</a-form-item>

				<a-form-item name="password" :rules="[{ required: true, message: '密码不能为空!' }, { min:9, max:20, message: '密码不能小于9位', trigger: 'blur' },]" >
					<a-input-password v-model:value="formState.password" :maxlength="20" size="large" placeholder="请输入9位以上的密码">
						<template #prefix><LockOutlined class="site-form-item-icon" /></template>
					</a-input-password>
				</a-form-item>

				<a-form-item name="remember">
					<a-checkbox v-model:checked="formState.remember">记住我</a-checkbox>
				</a-form-item>

				<div class="btn-wrapper"><a-button type="primary" size="large" html-type="submit" :loading="loading" :disabled="success" style="margin:0 auto">{{textLogin}}</a-button></div>
			</a-form>
		</a-card>
	</div>
</template>

<style scoped lang="scss">
:deep(.ant-card-head-title){font-size:20px; text-align: center; color:var(--font-base-color);}
:deep(.ant-card .ant-card-head){min-height:70px;}
.site-form-item-icon{
	margin-right: 4px;
}
:deep(.ant-input-affix-wrapper >input.ant-input){font-size:14px;}
:deep(.ant-card-body){padding:40px;}
.btn-wrapper{
	text-align: center; padding-top:20px;
	.ant-btn-lg{letter-spacing:2px;font-size:14px;}
}
.ant-card{max-width:390px;width:calc(100vw - 32px);z-index:1}
.login-wrap {
	height:100vh;
	width: 100vw;
	overflow: auto;
	display: flex;
	flex-direction: column; justify-content: center;
	align-items: center;
	position: relative;
}
.login-bg{
	width:100%; position:absolute; z-index:0; overflow: hidden; display: flex; align-items: center; justify-content: center;
	img{width:1000px}
}
@media screen and (max-width:540px) {
	.login-bg{display: none;}
}
</style>